<template>
    <div class="Cybe">
        <div class="header">
            <h1>公司（后台）管理系统</h1>
            <div class="close"><input type="button" style="width: 80px" value="退出"></div>
        </div>
        <div class="main">
           
            <div class="main-right">
                <ul>
                    <li
                            v-for="(item,index) in dat"
                            :key="item.id"
                            @mouseover='over(index)'
                            @mouseout='out(index)'
                            :class="item.txt=='active' ? 'active' : ''">
                        <router-link v-bind:to="item.url">{{item.text}}</router-link>
                    </li>
                </ul>
            </div>
             <div class="main-left">
                <router-view/>
            </div>
        </div>
    </div>
</template>
<script src="./public/public.css"></script>
<script>
    export default {
        name: "Cybe",
        data(){
            return{
                dat:[
                    {
                        color:'',
                        txt: '',
                        url:'/pfmtkb',
                        text:  '平台管理看板',
                    },
                    {
                        txt: '',
                        url:'/eepwmn',
                        text:'员工密码修改',
                    },
                    {
                        txt: '',
                        url:'/eeaymt',
                        text:'员工权限管理',
                    },
                    {
                        txt: '',
                        url:'/remt',
                        text:'简历管理',
                    },
                    {
                        txt: '',
                        url:'/bsmt',
                        text:'企业管理',
                    },
                    {
                        txt: '',
                        url:'/etmt',
                        text:'专家管理',
                    },
                    {
                        txt: '',
                        url:'/flmt',
                        text:'财务管理',
                    },
                    {
                        txt: '',
                        url:'/ncmt',
                        text:'通知管理',
                    }
                ],
            }
        },
        methods:{
            over:function (i) {
                this.dat[i].txt='active';
            },
            out:function (i) {
                this.dat[i].txt='';
            }
        },
    }
</script>

<style scoped>
    *{
        margin: 0;
        padding: 0;
    }
    li {
        list-style-type: none;
    }
    img,input {
        border: none;
        outline: none;
    }
    a{
        text-decoration: none;
        color: black;
    }
    a:hover {
        color: #AFB5C0;
    }
    .header{
        width: 100%;
        height: 100px;
        background-color: #6699CC;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .main{
        width: 100%;
        height: calc(100% - 100px);
    }
    .main-left{
        width:calc(100% - 240px);
        height: 100%;
        float: left;
        display: flex;
        justify-content: center;
    }
    .main-right{
        width: 240px;
        height: 690px;
        float: left;
        background-color: #6699CC;

        font-size: 20px;
    }
    .main-right>ul>li{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 240px;
        height: 40px;
    }
    .active{
        background-color: #99CCFF;
        color: #fff;
    }
    .close{
        position: absolute;
        top: 10px;
        right: 10px;
    }
</style>